<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '活动详情',
  },
}
</route>

<script setup>
import ActivityBaseInfo from '@/components/ActivityBaseInfo.vue'
import BottomOperateBox from '@/components/BottomOperateBox.vue'
import ContentBox from '@/components/ContentBox.vue'
import HistoryEvaluationItem from '@/components/HistoryEvaluationItem.vue'
import JudgePermission from '@/components/JudgePermission.vue'
import ProgrammeList from '@/components/ProgrammeList.vue'
import CustomApi from '@/service/custom'
import { nameMask, phoneMask, prevPageNeedRefresh } from '@/utils/index'
import { useMessage } from 'wot-design-uni'

const message = useMessage('wd-message-box-slot')

const optionId = ref('')
onLoad((options) => {
  const { id } = options
  if (id) {
    optionId.value = id
    getCustomActivityDetail(id)
  }
})

const detailData = ref({
  name: '',
  type_dictText: '',
  note: '',
  playerNumber: '',
  contactor: '',
  contactPhone: '',
  startTime: '',
  duration: '',
  programList: [],
})
const getCustomActivityDetail = async (id) => {
  const { code, result } = await CustomApi.getCustomActivityDetail({ id })
  if (code === 200) {
    detailData.value = result
  }
}
const infoDescList = computed(() => {
  const { startTime, duration, playerNumber, contactor, contactPhone } =
    detailData.value
  return [
    { label: '开始时间', value: startTime },
    { label: '活动时长(分钟)', value: duration },
    { label: '参与人数', value: playerNumber },
    { label: '联系人', value: nameMask(contactor) },
    { label: '联系电话', value: phoneMask(contactPhone), showCallBtn: true },
  ]
})

const swiperList = computed(() => {
  return detailData.value.coverUrl ? detailData.value.coverUrl.split(',') : []
})

const approveNote = ref('')
const approveLevelActivity = async (operator) => {
  const params = {
    id: optionId.value,
    operator,
    note: approveNote.value,
  }
  const { code, message } = await CustomApi.approveLevelActivity(params)
  if (code === 200) {
    uni.showToast({
      icon: 'success',
      title: '审批成功',
    })
    setTimeout(() => {
      isNavigateBack.value = true
      uni.navigateBack()
    }, 1000)
  } else {
    uni.showToast({
      icon: 'none',
      title: message,
    })
  }
}

const handleApprove = async (operator) => {
  if (operator === 'pass') {
    approveLevelActivity(operator)
    return
  }
  message
    .confirm({
      title: '备注',
    })
    .then(() => {
      approveLevelActivity(operator)
    })
    .catch((error) => {
      approveNote.value = ''
      console.log(error)
    })
}

const isNavigateBack = ref(false)
onUnload(() => {
  prevPageNeedRefresh(isNavigateBack.value)
})
</script>

<template>
  <view class="common-page-bg">
    <view class="p-24rpx pb-160rpx">
      <template v-if="detailData.coverUrl">
        <view
          v-if="swiperList.length > 1"
          class="mb-24rpx"
        >
          <wd-swiper
            :list="swiperList"
            autoplay
            stop-autoplay-when-video-play
            :autoplay-video="false"
            :indicator="{ type: 'dots-bar' }"
          ></wd-swiper>
        </view>
        <view
          v-else
          class="mb-24rpx"
        >
          <wd-img
            custom-class="w-full h-400rpx"
            round
            radius="16rpx"
            :src="detailData.coverUrl"
            :preview-src="detailData.coverUrl"
            enable-preview
            mode="aspectFill"
          />
        </view>
      </template>
      <ActivityBaseInfo
        :name="detailData.name"
        :descList="infoDescList"
        :phone="detailData.phone"
      />
      <view class="h-24rpx"></view>
      <ContentBox
        title="活动介绍"
        :content="detailData.note"
      />
      <view class="h-24rpx"></view>
      <ContentBox title="节目列表">
        <ProgrammeList :list="detailData.programList" />
      </ContentBox>
    </view>
    <JudgePermission action="hall:hall_joint_activity:approve">
      <BottomOperateBox>
        <view class="flex justify-between">
          <wd-button
            plain
            custom-class="approve-btn reject"
            @click="handleApprove('reject')"
          >
            审批拒绝
          </wd-button>
          <wd-button
            custom-class="approve-btn pass"
            @click="handleApprove('pass')"
          >
            审批通过
          </wd-button>
        </view>
      </BottomOperateBox>
    </JudgePermission>

    <wd-message-box selector="wd-message-box-slot">
      <wd-textarea
        custom-class="note-textarea"
        v-model="approveNote"
        placeholder="请输入"
      />
    </wd-message-box>
  </view>
</template>

<style lang="scss">
.approve-btn {
  flex: 1;
  margin: 0 12rpx !important;
  height: 88rpx !important;
  border-radius: 44rpx !important;
  font-size: 32rpx !important;
  font-weight: 500 !important;

  &.pass {
    color: #fff !important;
    background-image: linear-gradient(
      109deg,
      #f6a667 0%,
      #f35f2e 100%
    ) !important;
  }

  &.reject {
    color: #f98f18 !important;
    border: 2rpx solid rgba(249, 143, 24, 1) !important;
  }
}

.note-textarea {
  // --wot-textarea-bg: red;

  &.wd-textarea {
    background: $uni-bg-color-input !important;
    border-radius: 16rpx !important;

    .wd-textarea__value {
      background: $uni-bg-color-input !important;
    }
  }
}
</style>
